<template>

    <addfileFlowFeedback ref="addfileFlowFeedback" class="addfileFlowFeedback" />
    <addfileFlowView ref="addfileFlowView" class="addfileFlowView" />

    <div class="container">
        <div style="height: 20px;"></div>

        <div class="header">
            <div class="top flex">
                <img src="../../assets/file_management_icon.png" alt="">
                <p>任务管理</p>
            </div>
            <div class="navCard_box flex">
                <div class="navCard flex">
                    <img class="publishImg" src="../../assets/file_publish_ivon.png" alt="">
                    <div class="publish flex" @click="addHandle">
                        <p>公文发布</p>
                        <img src="../../assets/room_add_icon.png" alt="">
                    </div>
                </div>
                <div class="navCard flex">
                    <img class="allImg_icon" src="../../assets/file_all_icon.png" alt="">
                    <div class="">
                        <p class="pName">我统筹的</p>
                        <p class="number"><span>0</span>条</p>
                    </div>
                </div>
                <div class="navCard flex">
                    <img class="allImg_icon" src="../../assets/file_all_icon.png" alt="">
                    <div class="">
                        <p class="pName">抄送我的</p>
                        <p class="number"><span>0</span>条</p>
                    </div>
                </div>
                <div class="navCard flex">
                    <img class="allImg_icon" src="../../assets/file_all_icon.png" alt="">
                    <div class="">
                        <p class="pName">待办公文</p>
                        <p class="number"><span>0</span>条</p>
                    </div>
                </div>
                <div class="navCard flex">
                    <img class="allImg_icon" src="../../assets/file_all_icon.png" alt="">
                    <div class="">
                        <p class="pName">已办公文</p>
                        <p class="number"><span>0</span>条</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="nav_box flex" v-if="standing == '校长'">
                <div :class="{ 'nav_li': active != 'pending', 'nav_li_active': active === 'pending' }"
                    @click="active = 'pending'">办理中</div>
                <div :class="{ 'nav_li': active != 'pending_secretary', 'nav_li_active': active === 'pending_secretary' }"
                    @click="active = 'pending_secretary'">已办理</div>

            </div>
            <div class="table_box">
                <el-table :data="list" style="width: 100%" size="large" class="my-table"
                    :row-style="{ height: '64px', textAlign: 'center', }" :cell-style="{ textAlign: 'center', }"
                    :header-cell-style="{
                        background: '#F5F6F8', color: '#999999', height: '50px', textAlign: 'center', fontSize: '14px',
                    }">
                    <!-- <el-table-column type="selection" width="55" /> -->
                    <el-table-column prop="id" label="序号" min-width="60" />
                    <el-table-column prop="documentTitle" label="来文标题" min-width="150" />
                    <el-table-column prop="documentNumber" label="来文字号" min-width="90" />
                    <el-table-column prop="department" label="来文部门" min-width="100" />
                    <el-table-column prop="receivedTime" label="接收时间" min-width="130" />
                    <el-table-column prop="coordinator" label="统筹人" min-width="150" />
                    <el-table-column prop="mainOffice" label="主办处室" min-width="150" />
                    <el-table-column prop="cooperatingDepartment" label="配合部门" min-width="150" />
                    <!-- <el-table-column prop="documentDescription" label="文字描述" />  -->
                    <el-table-column prop="zip" label="状态" min-width="120">
                        <template #default="scope">
                            <span v-if="scope.row.status == 'rejected'" style="color: #999999;">已驳回</span>
                            <span v-if="scope.row.status == 'approved'" style="color: #0065FF;">已通过</span>
                            <span v-if="scope.row.status != 'rejected' && scope.row.status != 'approved'"
                                style="color: #FF7302;">审批中</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="zip" label="操作" fixed="right" min-width="120">
                        <template #default="scope">
                            <el-button class="table_btn1" @click="handleEdit(scope.row.id)">反馈</el-button>
                            <!-- <el-button class="table_btn" @click="delHandle(scope.row.id)">删除</el-button> -->
                        </template>
                    </el-table-column>
                    <template v-slot:empty>
                        <el-empty description="暂无数据"></el-empty>
                    </template>
                </el-table>
                <el-config-provider :locale="locale">
                    <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                        @current-change="changeCurrentPage">
                    </el-pagination>
                </el-config-provider>
            </div>
        </div>
    </div>



</template>

<script>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import addfileFlowView from "../../components/fileFlow/addfileFlowView.vue";
import addfileFlowFeedback from "../../components/fileFlow/addfileFlowFeedback.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";

export default {
    data() {
        return {
            page: 1,
            pageSize: 5,
            total: 0,
            limit: 5,
            active: "pending",
            activeValue: "pending",
            list: [],
            isModalVisible: true,
            tableData: [],
        };
    },
    components: {
        addfileFlowView, addfileFlowFeedback, ElConfigProvider, ElMessageBox, ElMessage
    },
    setup() {
        return {
            locale: zhCn,
        }
    },
    mounted() {
        this.getFileList();
    },
    watch: {
        active(newValue) {
            this.getFileList();
        }
    },
    methods: {

        addHandle() {
            this.$refs.addfileFlowView.dialogFormVisible = true
            this.$refs.addfileFlowView.popupFlag = true
        },

        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getFileList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getFileList();
        },
        getFileList() {
            httpService("/javaApi/docDocuments/listOther/" + this.page + "/" + this.pageSize, { status: this.active }, "get").then((data) => {
                if (data.list) {
                    data.list.map(item => {
                        return {
                            ...item,
                            receivedTime: item.receivedTime = item.receivedTime.slice(0, 10),
                            coordinator: item.coordinator = item.coordinator.split(",").map(val => val = val.split("-")[1]).join(','),
                            mainOffice: item.mainOffice = item.mainOffice.split(",").map(val => val = val.split("-")[1]).join(','),
                            cooperatingDepartment: item.cooperatingDepartment = item.cooperatingDepartment.split(",").map(val => val = val.split("-")[1]).join(','),
                        }
                    })
                }
                this.list = data.list
                this.total = data.total
            });
        },

        handleEdit(id) {
            this.$refs.addfileFlowFeedback.dialogFormVisible = true
            this.$refs.addfileFlowFeedback.popupFlag = true
            this.$refs.addfileFlowFeedback.queryById(id)
        },
        // delHandle(id) {
        //     ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
        //         confirmButtonText: "确定",
        //         cancelButtonText: "取消",
        //         type: "warning",
        //     })
        //         .then(() => {
        //             httpService("/javaApi/docDocuments/deleteById", "id=" + id, "post").then(
        //                 (data) => {
        //                     if (data.code == 200) {
        //                         ElMessage.success("删除成功");
        //                         this.getFileList();
        //                     } else {
        //                         ElMessage.error("删除失败");
        //                     }
        //                 }
        //             );
        //         })
        //         .catch(() => { });
        // },
    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('../../assets/font/PFDinTextArabic-Medium.ttf') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.flex {
    display: flex;
    align-items: center;
}

.container {
    overflow: auto !important;
}

.header {
    background-color: #fff;
    border-radius: 5px;
    padding-bottom: 20px;
}

.top p {
    columns: #000000;
    font-size: 22px;
    line-height: 22px;
    font-weight: bold;
}

.top img {
    margin-left: 7px;
}

.navCard_box {
    justify-content: space-evenly;
}

.navCard {
    width: calc((100% - 120px) / 5);
    /* height: 103px; */
    height: 5.3vw;
    min-height: 80px;
    border-radius: 5px;
    background-color: #F7F8FA;
    box-sizing: border-box;
    border: 1px solid #E8EAED;
}

.navCard>img {
    margin: 0 30px 0 20px;
}

.publishImg {
    width: 25%;
    height: auto;
    /* width: 70px;
    height: 60px; */
    margin-right: 25px !important;
}

.allImg_icon {
    /* width: 64px;
    height: 64px; */
    width: 25%;
    height: auto;
}

.publish {
    background: linear-gradient(to bottom, #FF7F17, #FF7200);
    font-size: 16px;
    /* font-size: min(14px, 17px); */
    line-height: 17px;
    color: #fff;
    padding: 10px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 5px;
}

.publish img {
    width: 14px;
    margin-left: 10px;
}

.pName {
    color: #000;
    font-size: 16px;
}

.number {
    color: #000;
    font-size: 16px;
}

.number span {
    /* font-size: 34px; */
    font-size: min(2vw, 34px);

    font-family: 'MyCustomFont', sans-serif;
    margin-right: 10px;
}

.main {
    /* width: 70%; */
    background-color: #fff;
    padding: 15px 10px;
    margin-top: 20px;
    border-radius: 5px;
}

.nav_box {
    /* border-bottom: 2px solid #F0F2F4; */
    box-sizing: content-box;
    position: relative;
}

.nav_li {
    padding-bottom: 10px;
    width: 85px;
    text-align: center;
    border-bottom: 2px solid transparent;
    z-index: 99;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}

.nav_li_active {
    padding-bottom: 10px;
    width: 85px;
    text-align: center;
    border-bottom: 2px solid #007EFF;
    z-index: 99;
    cursor: pointer;
    font-size: 16px;
    color: #007EFF;
    font-weight: bold;
}

.xian {
    width: 100%;
    height: 2px;
    background-color: #F0F2F4;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.table_box {
    padding-top: 20px;
}

.table_btn1 {
    width: 75px;
    height: 32px;
    background-color: #007EFF;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
}

.table_btn {
    width: 75px;
    height: 32px;
    background-color: #eb4040;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
}

.my-table {
    color: #000;
    font-size: 16px;
    margin-bottom: 15px;
}
</style>